<template>
    <div class="content">
        <div class="nav-tool">
            <u-icon
                name="arrow-left"
                color="#000000"
                size="20"
                @click="back"
                v-if="!showHome"
            ></u-icon>
            <u-icon size="22" color="#000000" name="home" @click="toHome" v-if="showHome"></u-icon>
            <p class="title">{{ orderId ? '卡券详情' : '提交订单' }}</p>
        </div>
        <div class="container">
            <card-item :item="cardInfo" />
            <div class="card-desc">
                <div class="head">
                    <img class="icon" src="@/static/images/common/tips.png" />
                    <p class="title">温馨提示</p>
                </div>
                <div class="center">
                    <p class="center-item" v-for="(item, index) in description" :key="index">
                        {{ item }}
                    </p>
                </div>
                <div class="footer">
                    <div class="footer-item">
                        <div class="left">
                            <img class="icon" src="@/static/images/card/shop.png" />
                            <p class="title">门店</p>
                        </div>
                        <p class="name">{{ cardInfo.studyhallName || '' }}</p>
                    </div>
                    <div class="footer-item" v-if="orderId">
                        <div class="left">
                            <img class="icon" src="@/static/images/common/time.png" />
                            <p class="title">购买日期</p>
                        </div>
                        <p class="name">
                            {{ cardInfo.createTime ? formatTime(cardInfo.createTime) : '' }}
                        </p>
                    </div>
                </div>
            </div>
            <phone-call :phoneNumber="phone" v-if="spuId" />
            <div class="footer-bar">
                <template v-if="spuId">
                    <p class="label">
                        订单金额<span class="unit">¥</span
                        ><span class="price">{{ cardInfo.price | formatMoney(2) }}</span>
                    </p>
                    <u-button
                        color="#FF5518"
                        size="normal"
                        text="提交订单"
                        @click="submit"
                        :customStyle="{ width: '252rpx', margin: 0 }"
                    ></u-button>
                </template>
                <template v-if="orderId">
                    <u-button
                        color="#5428EC"
                        size="normal"
                        text="使用卡券"
                        @click="use"
                        :customStyle="{ width: '100%', margin: 0 }"
                    ></u-button>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import CardItem from '@/components/CardItem';
import PhoneCall from '@/components/PhoneCall';
import { mapGetters } from 'vuex';
export default {
    name: 'settle',
    components: {
        CardItem,
        PhoneCall,
    },
    data() {
        return {
            showHome: false,
            spuId: null,
            orderId: null,
            studyhallId: null,
            cardInfo: {},
            description: [],
        };
    },
    computed: {
        ...mapGetters(['phone']),
    },
    onLoad(options) {
        if (options.spuId) {
            this.spuId = Number(options.spuId);
            this.studyhallId = Number(options.studyhallId);
            this.getSpuDetail();
        }
        if (options.orderId) {
            this.orderId = Number(options.orderId);
            this.getOrderDetail();
        }
        if (options.type) {
            this.showHome = true;
        }
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        toHome() {
            uni.switchTab({
                url: '/pages/home/index',
            });
        },
        use() {
            uni.navigateTo({
                url:
                    '/pages/reserve/settle?id=' +
                    this.cardInfo.studyhallId +
                    '&cardId=' +
                    this.cardInfo.id,
            });
        },
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        },
        getSpuDetail() {
            this.$Api.study.card
                .get({
                    id: this.spuId,
                })
                .then(res => {
                    this.cardInfo = res;
                    this.description = (res.description || '').split('\n');
                });
        },
        getOrderDetail() {
            this.$Api.member.card
                .get({
                    orderId: this.orderId,
                })
                .then(res => {
                    this.cardInfo = res;
                    this.description = (res.remarks || '').split('\n');
                });
        },
        submit() {
            let items = [];
            items.push({
                spuId: this.spuId,
                count: 1,
            });
            this.$Api.trade.order
                .submit({
                    items: items,
                    studyhallId: this.studyhallId,
                })
                .then(res => {
                    let response = JSON.parse(res.displayContent);
                    // 唤起微信支付
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: response.timeStamp,
                        nonceStr: response.nonceStr,
                        package: response.packageValue,
                        signType: response.signType,
                        paySign: response.paySign,
                        success: function (payRes) {
                            if (payRes.errMsg === 'requestPayment:ok') {
                                uni.navigateTo({
                                    url: '/pages/card/success?orderId=' + res.orderId,
                                });
                            }
                        },
                        fail: function (err) {
                            if (err.errMsg === 'requestPayment:fail cancel') {
                                uni.showToast({
                                    title: '用户取消支付',
                                    icon: 'none',
                                });
                            } else {
                                uni.showToast({
                                    title: '支付失败',
                                    icon: 'none',
                                });
                            }
                        },
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx 30rpx;
    .card-desc {
        background: #fff;
        border-radius: 24rpx;
        margin-top: 20rpx;
        padding: 22rpx 32rpx;
        .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
        }
        .head {
            padding-bottom: 12rpx;
            border-bottom: 1rpx solid #e5e5e5;
            @include flexBox(flex-start, center);
            .title {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
            }
        }
        .center {
            margin: 28rpx 0;
            .center-item {
                font-size: 28rpx;
                color: #2f2f2f;
                line-height: 44rpx;
            }
        }
        .footer {
            border-top: 1rpx solid #e5e5e5;
            .footer-item {
                margin-top: 12rpx;
                @include flexBox(space-between, center);
                .left {
                    @include flexBox(flex-start, center);
                    .title {
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                    }
                }
                .name {
                    font-size: 28rpx;
                    color: #2f2f2f;
                }
            }
        }
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 14rpx 30rpx;
        background: #fff;
        box-sizing: border-box;
        @include flexBox(space-between, center);
        .label {
            font-size: 28rpx;
            color: #5c5c5c;
            .unit {
                color: #fa6400;
                font-size: 32rpx;
                margin-left: 20rpx;
            }
            .price {
                color: #fa6400;
                font-size: 48rpx;
            }
        }
    }
}
</style>
